/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    Modal,
    TouchableHighlight,
    TextInput,
    Platform,
    TouchableOpacity,
    ScrollView,
    Alert
} from 'react-native';
import ImageCropPicker from 'react-native-image-crop-picker';
import NavigationBar from '../components/NavigationBar';
import ImageWrapper from '../components/ImageWrapper';
import questionService from '../lib/services/questionService';
import StorageUser from '../lib/plugins/StorageUser';
const {height, width} = Dimensions.get('window');
export default class QuestionFeedback extends Component {
    constructor(props) {
        super(props);
        this.token = '';
        this.state = {
            text:'问题反馈',
            proposal:'',
            title:'',
            imgUrl:{},
            imgData:{},
        };
    }
    componentDidMount() {
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.token){
                    $this.token = data.token;
                }               
            }).catch(err=> {
                console.log(err)
            });
    }
    render() {
        return (
            <View style={{flex:1}}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'问题反馈'} 
                    leftPress={()=>this.goBack()} 
                    rightText={'发送'} 
                    rightTextPress={()=>this.sendData()} 
                    rightTextStyle={{color:'#fff'}}/>
                <ScrollView>
                    <View>
                        <View style={{padding:10}}>
                            <Text style={{fontSize:14}}>问题标题</Text>
                        </View>
                        <TextInput 
                            style={styles.inputs} 
                            underlineColorAndroid="transparent" 
                            placeholder="请填写问题标题"
                            onChangeText={(text) => this.getTitle(text)}/>
                    </View>
                    
                    <View style={styles.tuxiang}>
                        <Text>图片(选填)和建议内容(必填)</Text>
                    </View>
                    <View style={styles.xiang}>
                        <View>
                            <TouchableOpacity onPress={()=>this.getImage()}>
                                <ImageWrapper style={{width:80,height:80,marginLeft:10}} icon={this.state.imgUrl.path?{uri:this.state.imgUrl.path}:'addImg'} />
                            </TouchableOpacity>
                        </View>
                        <View style={{flex:1,padding:10}}>
                            <TextInput
                                style={{padding:3}}
                                underlineColorAndroid={'transparent'}
                                textAlignVertical={'top'}
                                multiline={true}
                                numberOfLines={6}
                                placeholder={'请您填写建议内容'}
                                onChangeText={(text)=>this.getProposal(text)}/>
                        </View>
                    </View>
                    <View style={styles.tuxiang}>
                        <Text>qq邮箱(选填)</Text>
                    </View>
                    <TextInput 
                        style={styles.inputs} 
                        underlineColorAndroid="transparent" 
                        placeholder="方便我们联系您(选填)"
                        onChangeText={(text) => this.setState({text})}/>
                </ScrollView>
            </View>
        );
    }

    goBack(){
        this.props.navigation.goBack();
    }
    // 获取输入的问题标题
    getTitle(text){
        this.setState({
            title:text
        })
    }
    // 获取填写的建议内容
    getProposal(text){
        this.setState({
            proposal:text
        })
    }
    // 获取选择的图片的路径
    getImage(){
        var $this = this;
        ImageCropPicker.openPicker({ 
            cropping: false,
            mediaType:'photo',
        }).then(image => { 
            var source;
            if (Platform.OS === 'android') {
                source = {path: image.path, isStatic: true};
            } else {
                source = {path: image.path.replace('file://', ''), isStatic: true};
            }
            $this.setState({
                imgUrl:source,
                imgData:image,
            })
        }).catch((err)=>{
            console.log(err)
        })
    }
    sendData(){
        var $this = this;
        var imgArr = [];
        if(this.state.title.replace(/^\s$/g,'')==''){
            alert('请填写问题标题！');
            return;
        }else if(this.state.proposal.replace(/^\s$/g,'')==''){
            alert('请填写建议内容！');
            return;
        }
        if(this.state.imgData.path){
            imgArr['img'] = this.state.imgData.path;
        }
        questionService.addHelp(function(data){
            // alert(JSON.stringify(data));
            if(data.code==10000){
                Alert.alert(
                    '提示信息',
                    '提交成功，感谢您的支持！',
                    [{text: '确定', onPress: () => $this.goBack()}])
            }
        },$this.state.title,$this.state.proposal,imgArr,$this.token);
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f5f5f5',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },
        }),
    },
    tan:{
        marginTop: 22,
        height:200,
        backgroundColor:'#eee',
        alignItems:'center',
        borderRadius:20,
    },
    tuxiang:{
        height:30,
        backgroundColor:'#eee',
        justifyContent:'center',
        paddingLeft:10,
    },
    left:{
        width:40,
        paddingLeft:30,
    },
    xiang:{
        flexDirection:'row',
        backgroundColor:'#fff',
        alignItems:'center'
    },
    inputs:{
        height:50,
        backgroundColor:'#fff',
        paddingLeft:10
    },
});